<template>
  <div class="list">
    <img src="https://gw.alicdn.com/imgextra/i1/O1CN01NFLo5N1k5VO0ke14h_!!6000000004632-1-tps-1125-522.gif" alt="">
    <div class="listbox1">
        <div class="listbox" v-for="(v,index) in listarr" :key="index">
            <img :src="v.img" alt="">
            <h5>{{ v.tittle }}</h5>
            <span>{{ v.msg }}</span>
        </div>
    </div>
  </div>
</template>

<script>

export default {
    data(){
        return{
            listarr:[]
        }
    },
    mounted(){
        this.$http({
            url: " http://localhost:3000/Inter",
            method: "get",

        }).then(res=>{
            this.listarr=res.data
        })
    }
}
</script>

<style scoped>
.list{
    width: 100%;
    box-sizing: border-box;
    height: 170px;
    display: flex;
    justify-content: space-around;
    position: relative;
}
.list>img{
    width: 100%;
    height: 100%;
    position: absolute;
}
.listbox{
    width: 82px;
    height: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    background: linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 172, 219) 100%);
    border-radius: 5px;
    margin: 2px;
}
.listbox1{
    display: flex;
    position: absolute;
    bottom: 0;
}
.listbox img{
    width: 45px;
    height: 45px;
}
.listbox h5{
    font-size: 13px;
    color: #000;
    font-weight: bold;
}
.listbox span{
    color: #EE0202;
    font-size: 12px;
}
</style>